<!-- 这里是画布视图的组件代码 -->
<template>
  <div class="content1">
    <div id="canvas-view" class="canvas-container">
      <div class="lineH" v-for="(item, index) in Hcount" :key="item+'H'" :style="{top: ((index * 20) + startX )+ 'px'}"></div>
      <div class="lineV" v-for="(item, index) in Vcount" :key="item+'V'" :style="{left: ((index * 20) + startY )+ 'px'}"></div>
    </div>
  </div>
</template>
<script>

 export default {
   name: 'canvasView' ,
   data() {
    return {
      Vcount: 0,//横向线条数量
      Hcount: 0,//纵向线条数量
      startX: 0,//起始横坐标
      startY: 0,//起始纵坐标
    }
   },
   mounted() {
    this.getCanvasWidthANgdHeight();
    window.addEventListener('resize', () => {
      this.getCanvasWidthANgdHeight();
    });
   },
   methods: {
    // 获取画布的宽度和高度
    getCanvasWidthANgdHeight() {
      const canvas = document.getElementById('canvas-view');
      const rect = canvas.getBoundingClientRect();
      const width = rect.width;   // 实际渲染宽度（包含缩放/变形）
      const height = rect.height; // 实际渲染高度
      this.Hcount = Math.trunc(height / 20) + 1; // 纵向线条数量
      this.Vcount = Math.trunc(width / 20) + 1; // 横向线条数量
      this.startX = height % 20 / 2; // 起始横坐标
      this.startY = width % 20 / 2; // 起始纵坐标
    }
   }
 }
</script>
<style scoped lang="scss">
.content1 {
    background-color: #fff;
    height: 100%;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    .canvas-container{
        box-sizing: border-box;
        border-radius: 10px;
        width: 100%;
        height: 100%;
        background-color: #f5f5f5;
        overflow: hidden;
        position: relative;
        .lineH{
            position: absolute;
            width: 100%;
            height: 1px;
            background-color: rgba(230,230,230,0.8);
            left: 0;
            z-index: 1;
            &:hover{
                background-color: rgba(26, 116, 232,0.5);
                box-shadow: 1px 0px 0 rgba(26, 116, 232,0.5);
                z-index: 2;
            }
        }
        .lineV{
            position: absolute;
            width: 1px;
            height: 100%;
            background-color: rgba(230,230,230,0.8);
            top: 0;
            z-index: 1;
            &:hover{
                background-color: rgba(26, 116, 232,0.5);
                box-shadow: 1px 0 0 rgba(26, 116, 232,0.5);
                z-index: 2;
            }
        }
    }
}
</style>